<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline label-width="120px">
                <el-form-item label="工单号" prop="工单号">
                    <el-input class="w-[280px]" v-model="queryParams.工单号" clearable placeholder="请输入工单号" />
                </el-form-item>
                <el-form-item label="工单类型" prop="工单类型">
                    <el-input class="w-[280px]" v-model="queryParams.工单类型" clearable placeholder="请输入工单类型" />
                </el-form-item>
                <el-form-item label="分配机构" prop="分配机构">
                    <el-input class="w-[280px]" v-model="queryParams.分配机构" clearable placeholder="请输入分配机构" />
                </el-form-item>

                <el-form-item label="快递单号" prop="快递单号">
                    <el-input class="w-[280px]" v-model="queryParams.快递单号" clearable placeholder="请输入快递单号" />
                </el-form-item>
                <el-form-item label="产品IMEI" prop="产品IMEI">
                    <el-input class="w-[280px]" v-model="queryParams.产品IMEI" clearable placeholder="请输入产品IMEI" />
                </el-form-item>
                <el-form-item label="产品品牌" prop="产品品牌">
                    <el-input class="w-[280px]" v-model="queryParams.产品品牌" clearable placeholder="请输入产品品牌" />
                </el-form-item>
                <el-form-item label="产品型号" prop="产品型号">
                    <el-input class="w-[280px]" v-model="queryParams.产品型号" clearable placeholder="请输入产品型号" />
                </el-form-item>
                <el-form-item label="产品颜色" prop="产品颜色">
                    <el-input class="w-[280px]" v-model="queryParams.产品颜色" clearable placeholder="请输入产品颜色" />
                </el-form-item>

                <el-form-item label="报修故障" prop="报修故障">
                    <el-input class="w-[280px]" v-model="queryParams.报修故障" clearable placeholder="请输入报修故障" />
                </el-form-item>
                <el-form-item label="故障说明" prop="故障说明">
                    <el-input class="w-[280px]" v-model="queryParams.故障说明" clearable placeholder="请输入故障说明" />
                </el-form-item>
                <el-form-item label="手机号码" prop="手机号码">
                    <el-input class="w-[280px]" v-model="queryParams.手机号码" clearable placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="物料费用" prop="物料费用">
                    <el-input class="w-[280px]" v-model="queryParams.物料费用" clearable placeholder="请输入物料费用" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                    <export-data class="ml-2.5" :fetch-fun="apiTbWorktaskLists" :params="queryParams"
                        :page-size="pager.size" />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
            <el-button v-perms="['tb_worktask/add']" type="primary" @click="handleAdd">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                新增
            </el-button>


            <el-button type="primary" size="default" @click="submitImgTask"
                :disabled="!selectData.length">生成详情截图</el-button>


            <div class="mt-4">
                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="工单号" prop="工单号" width="150" />
                    <el-table-column label="状态" prop="状态" width="80" />
                    <el-table-column label="工单类型" prop="工单类型" width="80" />
                    <el-table-column label="分配机构" prop="分配机构" width="120" />
                    <el-table-column label="分配人员" prop="分配人员" width="120" />
                    <el-table-column label="包裹编号" prop="包裹编号" width="120" />
                    <el-table-column label="快递公司" prop="快递公司" width="120" />
                    <el-table-column label="快递单号" prop="快递单号" width="120" />
                    <el-table-column label="产品IMEI" prop="产品IMEI" width="150" />
                    <el-table-column label="产品品牌" prop="产品品牌" width="120" />
                    <el-table-column label="产品型号" prop="产品型号" width="150" />
                    <el-table-column label="产品颜色" prop="产品颜色" width="120" />
                    <el-table-column label="保修状态" prop="保修状态" width="120" />
                    <el-table-column label="报修故障" prop="报修故障" width="120" />
                    <el-table-column label="故障说明" prop="故障说明" width="120" />
                    <el-table-column label="报修服务类型" prop="报修服务类型" width="120" />
                    <el-table-column label="用户名称" prop="用户名称" width="120" />
                    <el-table-column label="报修数量" prop="报修数量" width="120" />
                    <el-table-column label="手机号码" prop="手机号码" width="120" />
                    <el-table-column label="物料费用" prop="物料费用" width="120" />
                    <el-table-column label="服务费" prop="服务费" width="120" />
                    <el-table-column label="优惠费用" prop="优惠费用" width="120" />
                    <el-table-column label="收费合计" prop="收费合计" width="120" />

                    <el-table-column label="保单号" prop="保单号" width="120" />
                    <el-table-column label="密码" prop="密码" width="120" />
                    <el-table-column label="出厂日期" prop="出厂日期" width="120" />
                    <el-table-column label="购买日期" prop="购买日期" width="120" />
                    <el-table-column label="保修期限" prop="保修期限" width="120" />
                    <el-table-column label="母单号" prop="母单号" width="120" />
                    <el-table-column label="创建时间" prop="创建时间" width="120" />
                    <el-table-column label="详细地址" prop="详细地址" width="120" />
                    <el-table-column label="公司名称" prop="公司名称" width="120" />
                    <el-table-column label="邮箱" prop="邮箱" width="120" />
                    <el-table-column label="工单备注" prop="工单备注" width="120" />
                    <el-table-column label="收货备注" prop="收货备注" width="120" />
                    <el-table-column label="最终服务类型" prop="最终服务类型" width="120" />

                    <el-table-column label="新SN" prop="新SN" width="120" />
                    <el-table-column label="坏品入库库房" prop="坏品入库库房" width="120" />
                    <el-table-column label="支付方式" prop="支付方式" width="120" />
                    <el-table-column label="实收金额" prop="实收金额" width="120" />
                    <el-table-column label="支付单号" prop="支付单号" width="120" />
                    <el-table-column label="支付姓名" prop="支付姓名" width="120" />
                    <el-table-column label="支付账户" prop="支付账户" width="120" />
                    <el-table-column label="支付日期" prop="支付日期" width="120" />
                    <el-table-column label="收款结果" prop="收款结果" width="120" />
                    <el-table-column label="收款备注" prop="收款备注" width="120" />

                    <el-table-column label="快递公司1" prop="快递公司1" width="120" />
                    <el-table-column label="快递单号1" prop="快递单号1" width="120" />
                    <el-table-column label="发货类型" prop="发货类型" width="120" />

                    <el-table-column label="发货备注" prop="发货备注" width="120" />
                    <el-table-column label="创建" prop="创建" width="120" />
                    <el-table-column label="时间2" prop="时间2" width="120" />
                    <el-table-column label="审核" prop="审核" width="120" />
                    <el-table-column label="审核时间" prop="审核时间" width="120" />
                    <el-table-column label="受理" prop="受理" width="120" />
                    <el-table-column label="受理日期" prop="受理日期" width="120" />
                    <el-table-column label="报价" prop="报价" width="120" />
                    <el-table-column label="报价日期" prop="报价日期" width="120" />
                    <el-table-column label="处理" prop="处理" width="120" />
                    <el-table-column label="处理日期" prop="处理日期" width="120" />
                    <el-table-column label="结单" prop="结单" width="120" />
                    <el-table-column label="结单日期" prop="结单日期" width="120" />
                    <el-table-column label="耗时" prop="耗时" width="120" />
                    <el-table-column label="预计完成时间" prop="预计完成时间" width="120" />
                    <el-table-column label="服务单状态" prop="服务单状态" width="120" />
                    <el-table-column label="派单价格" prop="派单价格" width="120" />
                    <el-table-column label="收货备注1" prop="收货备注1" width="120" />
                    <el-table-column label="发货物流费用" prop="发货物流费用" width="120" />
                    <el-table-column label="结算状态" prop="结算状态" width="120" />
                    <el-table-column label="是否结算" prop="是否结算" width="120" />
                    <el-table-column label="结算月份" prop="结算月份" width="120" />
                    <el-table-column label="不结算原因" prop="不结算原因" width="120" />
                    <el-table-column label="是否保内结算" prop="是否保内结算" width="120" />
                    <el-table-column label="是否保外买断" prop="是否保外买断" width="120" />
                    <el-table-column label="保内不结算原因" prop="保内不结算原因" width="120" />
                    <el-table-column label="物流费结算金额" prop="物流费结算金额" width="120" />
                    <el-table-column label="保内结算金额" prop="保内结算金额" width="120" />
                    <el-table-column label="保外结算金额" prop="保外结算金额" width="120" />
                    <el-table-column label="其他结算金额" prop="其他结算金额" width="120" />
                    <el-table-column label="保外买断金额" prop="保外买断金额" width="120" />
                    <el-table-column label="合计结算金额" prop="合计结算金额" width="120" />
                    <el-table-column label="参与人员" prop="参与人员" width="120" />
                    <el-table-column label="业务标识" prop="业务标识" width="120" />
                    <el-table-column label="工单来源" prop="工单来源" width="120" />
                    <el-table-column label="来源编号" prop="来源编号" width="120" />
                    <el-table-column label="结算备注" prop="结算备注" width="120" />

                    <el-table-column label="时间" prop="时间" width="120" />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="handleInfo(row)">
                                详情
                            </el-button>
                            <el-button type="primary" link @click="handlezhenduan(row)">
                                诊断
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" :page-sizes="[100, 300, 500, 1000, 2000]" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
        <info ref="infoRef"></info>
        <zhenduan ref="zhenduanRef"></zhenduan>
    </div>
</template>

<script lang="ts" setup name="tbWorktaskLists">
import { apiImgTaskAdd } from '@/api/img_task'
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiTbWorktaskLists, apiTbWorktaskDelete } from '@/api/tb_worktask'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)



const submitImgTask = async (data: any) => {

    console.log(selectData.value);

    if (!selectData.value.length) {
        feedback.msgError('请选择数据')
        return
    }


    const res = await apiImgTaskAdd({
        tb_worktask_id: selectData.value,
    })
    feedback.msgSuccess('提交成功,前往任务中心下载')
}

// 查询条件
const queryParams = reactive({
    工单号: '',
    工单类型: '',
    分配机构: '',
    分配人员: '',
    快递单号: '',
    产品IMEI: '',
    产品品牌: '',
    产品型号: '',
    产品颜色: '',
    保修状态: '',
    报修故障: '',
    故障说明: '',
    报修服务类型: '',
    报修数量: '',
    用户名称: '',
    手机号码: '',
    物料费用: '',
    服务费: '',
    优惠费用: '',
    收费合计: '',
    发货类型: '',
    受理日期: '',
    预计完成时间: '',
    服务单状态: '',
    派单价格: '',
    收货备注1: '',
    发货物流费用: '',
    结算状态: '',
    是否结算: '',
    结算月份: '',
    不结算原因: '',
    是否保内结算: '',
    是否保外买断: '',
    保内不结算原因: '',
    物流费结算金额: '',
    保内结算金额: '',
    保外结算金额: '',
    其他结算金额: '',
    保外买断金额: '',
    合计结算金额: '',
    结算备注: '',
    时间: ''
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiTbWorktaskLists,
    params: queryParams
})

// 添加
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

import info from './info.vue'

const infoRef = shallowRef<InstanceType<typeof info>>()

import zhenduan from './zhenduan.vue'

const zhenduanRef = shallowRef<InstanceType<typeof zhenduan>>()
const handleInfo = (row: any) => {
    infoRef.value?.open(row)
}
const handlezhenduan = (row: any) => {

    zhenduanRef.value?.open(row)
}


getLists()
</script>
